<template>
    <div class="flex flex-1 flex-col overflow-hidden">
        <div class="flex items-center px-4 py-2 border-b border-br-light">
            <span class="mr-2 font-bold text-tx-regular">示例装修</span>
        </div>

        <el-scrollbar>
            <div class="p-4 flex flex-col gap-4">
                <div class="flex items-center gap-2">
                    <label for="">风格：</label>
                    <el-radio-group v-model="diyData.style" size="small">
                        <el-radio label="简约风格" value="simple" />
                        <el-radio label="美化风格" value="beauty" />
                    </el-radio-group>
                </div>
                <div class="w-full p-4 pb-2 rounded bg-page">
                    <el-form-item label="标题图标">
                        <material-picker
                            v-model="diyData.topic.logo"
                            upload-class="bg-body"
                            size="60px"
                        >
                            <template #upload>
                                <div class="upload-btn w-[70px] h-[70px]">
                                    <icon name="el-icon-Plus" :size="16" />
                                    <span  class="text-xs leading-5">图标</span>
                                </div>
                            </template>
                        </material-picker>
                    </el-form-item>
                    <el-form-item label="标题名称">
                        <el-input v-model="diyData.topic.title" placeholder="请输入标题" />
                    </el-form-item>
                    <el-form-item label="标题描述">
                        <el-input v-model="diyData.topic.intro" placeholder="请输入描述" />
                    </el-form-item>
                    <el-form-item label="是否显示">
                        <div class="flex-1 flex items-center">
                            <el-switch v-model="diyData.topic.isEnable" />
                        </div>
                    </el-form-item>
                </div>

                <Draggable v-if="diyData.style === 'beauty'"
                           v-model="diyData.quick"
                           :item-key="'selected'"
                           animation="300"
                           handle=".drag-move"
                >
                    <template #item="{ element, index }">
                        <hover-close @close="handleDelete(index)">
                            <div class="w-full p-4 pt-2 rounded bg-page mb-4  ">
                                <i class="serial">#{{ index + 1}}</i>
                                <!-- 基本信息 -->
                                <el-form-item label="模块名称">
                                    <el-input v-model="element.name" placeholder="请输入名称" />
                                </el-form-item>
                                <el-form-item label="模块描述">
                                    <el-input v-model="element.intro" placeholder="请输入描述" />
                                </el-form-item>
                                <el-form-item label="布局方式">
                                    <el-radio-group v-model="element.layout">
                                        <el-radio-button label="标题" value="link" />
                                        <el-radio-button label="按钮" value="twig" />
                                        <el-radio-button label="应用" value="apply" />
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="点击事件">
                                    <el-radio-group>
                                        <el-radio-button label="链接跳转" value="href" />
                                        <el-radio-button label="点击对话" value="chat" />
                                    </el-radio-group>

                                </el-form-item>
                                <!-- 列表数据 -->
                                <div class="border-t border-br pt-2">
                                    <hover-close
                                        v-for="(item, i) in element.lists"
                                        :key="i"
                                        @close="handleDeleteLink(index, i)"
                                    >
                                        <div class="link-item">
                                            <el-form-item v-if="item.layout === 'button'" label="图标">
                                                <material-picker
                                                    upload-class="bg-body"
                                                    v-model="element.icon"
                                                    :exclude-domain="true"
                                                    size="60px"
                                                >
                                                    <template #upload>
                                                        <div class="upload-btn w-[70px] h-[70px]">
                                                            <icon name="el-icon-Plus" :size="16" />
                                                            <span  class="text-xs leading-5 pt-1">图标</span>
                                                        </div>
                                                    </template>
                                                </material-picker>
                                            </el-form-item>
                                            <el-form-item label="名称">
                                                <el-input v-model="item.name" placeholder="请输入名称" />
                                            </el-form-item>
                                            <el-form-item label="描述">
                                                <el-input v-model="item.intro" placeholder="请输入名称" />
                                            </el-form-item>
                                            <el-form-item label="按钮">
                                                <el-input v-model="item.button" placeholder="请输入按钮名" />
                                            </el-form-item>
                                            <el-form-item label="链接">
                                                <links-picker v-model="item.link" client="pc" />
                                            </el-form-item>
                                        </div>
                                    </hover-close>
                                    <div class="flex-1 flex items-center">
                                        <el-button
                                            class="w-full mr-4"
                                            size="default"
                                            plain
                                            @click="handleAddLink(index)"
                                        >
                                            <span class="mr-3">添加链接</span>
                                            <i class="serial py-[2px]">#{{ index + 1}}</i>
                                        </el-button>
                                        <div class="drag-move cursor-move ml-auto">
                                            <icon name="el-icon-Rank" size="18" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </hover-close>
                    </template>
                </Draggable>

                <div v-if="diyData.length <= 0">
                    <el-empty description="暂无数据" />
                </div>
            </div>
        </el-scrollbar>

        <div class="px-4 py-2.5 border-t border-br-light text-right">
            <el-button @click="handleAddPlate">添加模块</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { QuickType, QuickItemType, TopicType } from '../index.ts'
import Draggable from 'vuedraggable'
import feedback from '@/utils/feedback'

const props = defineProps({
    modelValue: {
        type: Object,
        default: () => ({
            style: 'simple',
            quick: [] as QuickType[],
            topic: {
                logo: '',
                title: '',
                intro: '',
                isEnable: true
            } as TopicType
        })
    }
})

const emits = defineEmits<{
    (event: 'update:modelValue', value: any): void
}>()

// 装修数据
const diyData = computed({
    get() {
        return props.modelValue
    },
    set(value) {
        emits('update:modelValue', value)
    }
})

/**
 * 链接添加
 *
 * @param index
 * @author zero
 */
const handleAddLink = (index: number) => {
    if (diyData.value.quick[index].lists.length >= 5) {
        return feedback.msgWarning('最多只允许设置5个')
    }
    switch (diyData.value.quick[index].layout) {
        case 'link':
            diyData.value.quick[index].lists.push({
                name: '',
                intro: '',
                link: {}
            } as QuickItemType)
            break
        case 'twig':
            diyData.value.quick[index].lists.push({
                icon: '',
                name: '',
                intro: '',
                link: {}
            } as QuickItemType)
            break
        case 'apply':
            diyData.value.quick[index].lists.push({
                name: '',
                intro: '',
                button: '',
                link: {}
            } as QuickItemType)
    }
}

/**
 * 链接删除
 *
 * @param {number} index
 * @param {number} i
 * @author zero
 */
const handleDeleteLink = (index: number, i: number) => {
    diyData.value.quick[index].lists.splice(i, 1)
}

/**
 * 板块添加
 *
 * @author zero
 */
const handleAddPlate = () => {
    if (diyData.value.quick.length >= 10) {
        return feedback.msgWarning('板块不能超出10个哦!')
    }
    diyData.value.quick.push({
        name: '',
        intro: '',
        layout: 'link',
        click: 'href',
        lists: []
    } as QuickType)
}

/**
 * 板块删除
 *
 * @param {number} index
 * @author zero
 */
const handleDelete = (index: number) => {
    diyData.value.quick.splice(index, 1)
}
</script>

<style scoped lang="scss">
.serial {
    font-style: normal;
    padding-inline: 5px;
    margin-left: -5px;
    font-size: 12px;
    color: var(--el-color-primary);
    background: var(--el-color-primary-light-9);;
    border-color: var(--el-color-primary-light-3);
    border-width: 1px;
    border-radius: 6px;
}
.link-item {
    padding: 12px;
    margin: 12px 0;
    border-radius: 8px;
    border: 1px dashed var(--el-border-color-light);
    background-color: var(--el-bg-color-page);
    box-shadow: 0 0 110px rgba(0, 0, 0, 0.2) inset;
}
</style>
